
const path = require("path");
//引入插件 数组中实例化 最后把style.css替换为MiniCssExtractPlugin.loader
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//css的压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//打包html
const HtmlWebpackPlugin = require('html-webpack-plugin');

const ESLintPlugin = require('eslint-webpack-plugin')

const CopyWebpackPlugin = require("copy-webpack-plugin")
//暴露一个对象
module.exports = {
  //配置打包模式(生产环境)
  mode: 'production',
  //配置入口文件
  entry: path.resolve(__dirname, '../src/index.js'),
  //配置出口文件
  output: {
    //当前路径创建的文件夹
    path: path.resolve(__dirname, '../build'),
    //文件名
    filename: './js/bundle.js'
  },
  module: {
    rules: [
      /* 
        test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
      */
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
          /* 
        less-loader:识别less文件类型
        css-loader:为了识别css类型文件进行打包
        style-loader:js把样式放在style标签中,并插入到页面中
        use后如果是一个数组,则是从后向前一致加载
          */
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      },
      {
        //图片配置
        test: /\.(png|jpg|gif|svg)$/,
        //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 15 * 1024, // 小于15kb以下的图片会被打包成base64格式
          },
        },
        generator: {
          filename: 'images/[name][ext]'
        }
      },
    ],
  },
  //压缩css文件
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
    minimize: true,
  },
  //插件
  plugins: [new MiniCssExtractPlugin({
    //输出独立文件的文件名
    filename: '../css/main.css'
  }),
  //压缩html
  new HtmlWebpackPlugin({
    //模板位置
    template: path.resolve(__dirname,'../public/index.html'),
    filename: "index.html",
    minify: {
      collapseWhitespace: true,
      keepClosingSlash: true,
      removeComments: true,
      removeRedundantAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      useShortDoctype: true
    }
  }),
  new ESLintPlugin({
    fix: true
  }),
  //打包公共文件
  new CopyWebpackPlugin({
    patterns: [{
      from:path.resolve(__dirname,"../public"),
      to: "public",
      //配置复制时忽略的文件
      globOptions: {
        ignore: ["**/index.html"]
      }
    }],
  }),
  ]
}